<template>
  <div class="organization-tree">
    <!--    horizontal 是水平排列方式-->
    <!--    label-class-name 标签样式-->
    <!--    collapsable 是否可折叠-->
    <!--    on-expand 展开方法-->
    <!--    on-node-click 点击事件-->
    <vue2-org-tree
      :data="treeData"
      :horizontal="true"
      collapsable
      @on-expand="onExpand"
      @on-node-click="NodeClick"
      @on-node-mouseover="onMouseover"
      @on-node-mouseout="onMouseout"
      :renderContent="renderContent"
    />
    <!-- 创建浮窗盒子 -->
    <div v-show="BasicSwitch" class="floating">
      <p>ID: {{ BasicInfo.id }}</p>
      <p>Name: {{ BasicInfo.label }}</p>
    </div>
  </div>
</template>

<script>
/**
 * @Version 1.0.0
 * @Author DemoHui
 * @Date 2022/11/29
 */
/**
 * 安装依赖
 npm install vue-tree-color
 npm i less-loader@7 less
 */
import Vue2OrgTree from "vue-tree-color";

export default {
  name: "index",
  components: {
    Vue2OrgTree,
  },
  data() {
    return {
      labelClassName: "bg-color-blue",
      treeData: {
        id: 0,
        label: "XXX科技有限公司",
        children: [
          {
            id: 2,
            label: "产品研发部",
            children: [
              {
                id: 5,
                label: "研发-前端",
              },
              {
                id: 6,
                label: "研发-后端",
              },
              {
                id: 9,
                label: "UI设计",
              },
              {
                id: 10,
                label: "产品经理",
              },
            ],
          },
          {
            id: 3,
            label: "销售部",
            children: [
              {
                id: 7,
                label: "销售一部",
              },
              {
                id: 8,
                label: "销售二部",
              },
            ],
          },
          {
            id: 4,
            label: "财务部",
          },
          {
            id: 9,
            label: "HR人事",
          },
        ],
      },
      BasicSwitch: false,
      BasicInfo: { id: null, label: null },
    };
  },
  created() {
    this.toggleExpand(this.treeData, true);
  },
  methods: {
    // 渲染节点
    renderContent(h, data) {
      return (
        <div style="text-align:center;">
          <div>
            <i class="el-icon-user-solid"></i>
            <span style="margin: 5px;">{data.label}</span>
            <span>男</span>
          </div>
          <div style="font-size:12px;line-height:20px;margin-top:5px;">
            测试人员
          </div>
        </div>
      );
    },
    // 节点点击事件
    NodeClick(e, data) {
      // e 为 event
      console.log(e);
      // data 当前项的所有详情 如：id label children
      console.log(data);
    },
    // 默认展开
    toggleExpand(data, val) {
      let _this = this;
      if (Array.isArray(data)) {
        data.forEach(function (item) {
          _this.$set(item, "expand", val);
          if (item.children) {
            _this.toggleExpand(item.children, val);
          }
        });
      } else {
        this.$set(data, "expand", val);
        if (data.children) {
          _this.toggleExpand(data.children, val);
        }
      }
    },
    // 折叠
    collapse(list) {
      let _this = this;
      list.forEach(function (child) {
        if (child.expand) {
          child.expand = false;
        }
        child.children && _this.collapse(child.children);
      });
    },
    // 展开
    onExpand(e, data) {
      if ("expand" in data) {
        data.expand = !data.expand;
        if (!data.expand && data.children) {
          this.collapse(data.children);
        }
      } else {
        this.$set(data, "expand", true);
      }
    },
    // 鼠标移出
    onMouseout(e, data) {
      console.log(e);
      console.log(data);
      this.BasicSwitch = false;
    },
    // 鼠标移入
    onMouseover(e, data) {
      this.BasicInfo = data;
      this.BasicSwitch = true;
      let floating = document.getElementsByClassName("floating")[0];
      floating.style.left = e.clientX + "px";
      floating.style.top = e.clientY + "px";
    },
  },
};
</script>

<style lang="scss">
.organization-tree {
  .org-tree-node-label-inner {
    color: #fff;
    background-color: #409eff;
  }

  .floating {
    background: rgba(0, 0, 0, 0.8);
    width: 150px;
    position: absolute;
    color: #fff;
    border-radius: 15px;
    box-sizing: border-box;
    left: 0;
    top: 0;
    transition: all 0.3s;
    z-index: 999;
    text-align: center;
    font-size: 12px;
  }
}
</style>
